<template>
	<view class="login">
		<view class="header">
			<view @click="note" :class="current == '0' ? 'active' : ''">短信登录</view>
			<view @click="pass" :class="current == '1' ? 'active' : ''">密码登录</view>
		</view>
		<swiper :duration="200" touchable="true" :current="current">
			<swiper-item>
				<view class="swiper-item">
					<view class="ipt1"><input type="text" value="" placeholder="请输入手机号"
							placeholder-style="font-size:14px;color:#ACACAC; margin-left:10px" /></view>
					<view class="ipt2">
						<input type="text" value="" placeholder="请输入验证码"
							placeholder-style="font-size:14px;color:#ACACAC; margin-left:10px" />
						<text>获取验证码</text>
					</view>
					<view class="btn"><button type="default">登录</button></view>
					<view class="agree">
						<view class="left">
							<label class="radio">
								<radio value="" />
								同意
							</label>
							<text class="as">《优驿用户协议》</text>
							<text>和</text>
							<text class="as">《隐私政策》</text>
						</view>
						<view class="rigth"><text>手机注册</text></view>
					</view>
					<view class="footer">
						<view class="box1">第三方账号登录</view>
						<view class="box2">
							<image src="../../static/image-login/1190@3x.png" mode=""></image>
							<image src="../../static/image-login/1191@3x.png" mode=""></image>
							<image src="../../static/image-login/1192@3x.png" mode=""></image>
							<image src="../../static/image-login/1193@3x.png" mode=""></image>
						</view>
						<view class="box3">
							<view><text>未注册的手机号登陆后将自动创建优驿账号</text></view>
							<view><text>如果您不同意上述协议,会影响您使用我们的产品和服务</text></view>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<view class="swiper-item">
						<view class="ipt1"><input type="text" value="" placeholder="请输入账号"
								placeholder-style="font-size:14px;color:#ACACAC; margin-left:10px"
								v-model="userAccount" /></view>
						<view class="ipt2">
							<input type="password" value="" placeholder="请输入密码"
								placeholder-style="font-size:14px;color:#ACACAC; margin-left:10px"
								v-model="userPassword" />
						</view>
						<view class="btn"><button type="default" @click="login">登录</button></view>
						<view class="agree">
							<view :class="{left:true,noAgree:noAgree}">
								<checkbox-group @change="isAgree">
									<checkbox value=true />
								</checkbox-group>
								<text :class="{as:true,noAgree:noAgree}">《优驿用户协议》</text>
								<text>和</text>
								<text :class="{as:true,noAgree:noAgree}">《隐私政策》</text>
							</view>
							<view class="rigth"><text>忘记密码?</text></view>
						</view>
						<view class="footer">
							<view class="box1">第三方账号登录</view>
							<view class="box2">
								<image src="../../static/image-login/1190@3x.png" mode=""></image>
								<image src="../../static/image-login/1191@3x.png" mode=""></image>
								<image src="../../static/image-login/1192@3x.png" mode=""></image>
								<image src="../../static/image-login/1193@3x.png" mode=""></image>
							</view>
							<view class="box3">
								<view><text>未注册的手机号登陆后将自动创建优驿账号</text></view>
								<view><text>如果您不同意上述协议,会影响您使用我们的产品和服务</text></view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	//vuex
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapActions
	} = createNamespacedHelpers("login");

	export default {
		data() {
			return {
				current: '0',
				userAccount: '',
				userPassword: '',
				//协议
				agree: false,
				//未同意提示
				noAgree:false
			};
		},
		methods: {
			//login
			...mapActions(["userLogin"]),
			note() {
				this.current = 0;
			},
			pass() {
				this.current = 1;
			},
			async login() {
				const userAccount = this.userAccount;
				const userPassword = this.userPassword;
				if (this.agree) {
					const data = await this.userLogin({
						userAccount,
						userPassword
					})
					if(data.code == 1301) {
						uni.setStorageSync('auth_token', data.data);
						console.log('success');
						uni.switchTab({
						    url: '/pages/home/home'
						});
					}
				} else {
					this.noAgree = true
				}

			},
			//协议
			isAgree(e) {
				if (e.detail.value.length) {
					console.log("agree");
					this.agree = true
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.login {
		padding: 10px;
		height: 400px;

		.header {
			display: flex;
			justify-content: space-around;
			margin-bottom: 48px;

			.active {
				color: #06121e;
				border-bottom: 2px solid black;
				font-weight: 600;
			}

			view {
				text-align: center;
				font-size: 14px;
				color: #bdc4ce;
				line-height: 50px;
			}
		}

		swiper {
			height: 100%;
			position: relative;

			.swiper-item {
				padding: 0px 10px;

				.ipt1 {
					height: 36px;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #f1f1f1;

					input {
						width: 265px;
						line-height: 30px;
						height: 30px;
					}
				}

				.ipt2 {
					height: 36px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					input {
						width: 265px;
						line-height: 30px;
						height: 30px;
					}

					text {
						font-size: 14px;
						color: #56aaff;
					}
				}

				.btn {
					width: 90%;
					margin: auto;

					button {
						width: 100%;
						height: 45px;
						color: #f9f9f9;
						background-color: #ff5e06;
						margin-top: 40px;
					}
				}

				.agree {
					margin-top: 30px;
					display: flex;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;
						&.noAgree {
							color: red;
						}
						.radio {
							size: 20px;
						}

						.as {
							color: #67c2ff;
							&.noAgree {
								color: red;
							}
						}

						font-size: 10px;
					}

					.rigth {
						font-size: 12px;
						color: #67c2ff;
					}
				}
			}

			.footer {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;

				.box1 {
					text-align: center;
					color: #8c9198;
					font-size: 12px;
				}

				.box2 {
					margin: auto;
					width: 80%;
					display: flex;
					justify-content: space-between;
					margin-top: 31px;
					margin-bottom: 39px;

					image {
						width: 35px;
						height: 35px;
					}
				}

				.box3 {
					text-align: center;
					font-size: 10px;
					color: #999999;
				}
			}
		}
	}
</style>
